<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>发表</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/common.css"/>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
	</head>
	<body class="bg_ff">
		<header class="mui-bar mui-bar-nav">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		    <h1 class="mui-title text_left">发表</h1>
		    <a href="javascript:void(0);" class="right small_btn mg_top10" onclick="issueWork()">发布</a>
		</header>
		<div class="mui-content bg_ff">
		    <div class="padding_12 bf_f8">
		    	<a href="musicChose.html"><img width="18" class="vertical-align_m" src="images/music.png"/> <span class="music_name">选择音乐</span></a>
		    	
		    </div>
		    <div class="textareare mg_top20">
		    	<textarea name="" rows="" cols="" placeholder="此时的感想~~~"></textarea>
		    </div>
		    <div class="file">
		    	<label for="file"><img class="upfile" src="images/add.png" alt="" /></label>
		    	
		    	<input type="file" name="" id="file" hidden="hidden" value="" />
		    	
		    </div>
		    <div class="mg_top20 padding_12">
		    	<p class="font_15">图片类型</p>
		    	<div class="img_type mg_top10 mui-clearfix">
		    		
		    	</div>
		    </div>
		    
		</div>
		
		
		
	
		
		
		<script src="js/mui.js"></script>
		<script src="js/jquery-1.7.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script type="text/javascript">
			mui.init()
			$('.img_type').on('click','a',function(){
				$(this).addClass('active').siblings().removeClass('active')
			})
			//图片类型
			function getWorkType(){
				
				$.ajax({
					type:"get",
					url:urlcom + "work/getWorkType",
					async:true,
					dataType:'json',
					
					success:function(res){
						
						if(res.code==0){
							var html = '';
							$.each(res.data, function(k,v) {
								html+='<a href="javascript:void(0);" data-id="'+v.workTypeId+'">'+v.name+'</a>'
							});
							$('.img_type').html(html)
						}
					}
		 			
			     })
			}getWorkType()
			//上传图片
			 $("#file").change(function(){
			 	$('.gif').show()
				var formData = new FormData();
				var fils=document.getElementById('file').files[0]
				console.log(fils)
				formData.append('file',fils);
				
				formData.append('userId',localStorage.getItem('userId'));
				$.ajax({
					type:'post',
					url:urlcom+'upload/image',
					data:formData,
					dataType:'json',
					contentType:false,
					processData:false,
					success:function(res){
						$('.gif').hide()
						$('.upfile').attr('src',res.data.pictureName);
//						
					},
					error:function(){
					}
			    })
				
			})
			 console.log(getUrlParam('name'))
			if(getUrlParam('name')){
				$('.music_name').html(getUrlParam('name'))
			}
			//发布
			function issueWork(){
				console.log($('.img_type a.active').attr('data-id'))
				$.ajax({
					type:"POST",
					url:urlcom + "work/issueWork",
					async:true,
					dataType:'json',
					data:{
						userId:localStorage.getItem('userId'),
						bgmId:getUrlParam('bgmId')||'',
						coverImg:$('.upfile').attr('src'),
						workTypeId:$('.img_type a.active').attr('data-id'),
						content:$('.textareare textarea').val()
					},
					success:function(res){
						if(res.code==0){
							msg('发布成功')
							setTimeout(function(){
								window.location.href = 'index.html'
							},1000)
							
						}else{
							msg(res.msg)
						}
					}
		 			
			     })
			}
			
		</script>
	</body>

</html>
